<template>
  <view>
    <form @reset="formReset" @submit="formSubmit">
      <view class="bottom-bar btn">
        <button
            class="weui-btn"
            formType="submit"
            :style="'background:' + color"
        >
          保存
        </button>
      </view>
      <view
          style="
          width: 95%;
          margin: 10rpx auto;
          box-shadow: 0 0 10rpx #eee;
          border-radius: 20rpx;
          background: #fff;
        "
      >
        <view class="flex-row flex-y-center edit-row">
          <view class="flex-grow-0 row-label" style="font-weight: 600">
            所在地区
          </view>
          <view class="flex-grow-1 flex-row">
            <view class="flex-grow-1" style="text-align: right">
              <block>
                <region-picker
                    name="picker"
                    :value="region"
                    @change="bindRegionChange"
                >
                  <view class="weui-select weui-select_in-select-after"
                  >{{ region[0] }}{{ region[1] }}{{ region[2] }}
                  </view>
                </region-picker>
                <input hidden="true" name="picker" :value="region.join('')"/>
              </block>
            </view>
            <view class="flex-grow-0 flex-y-center">
              <image
                  src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/images/icon-jiantou-r.png"
                  style="width: 12rpx; height: 22rpx"
              ></image>
            </view>
          </view>
        </view>

        <view class="flex-row flex-y-center edit-row" style="height: 150rpx">
          <view class="flex-grow-0 row-label">
            <view style="font-weight: 600">
              详细地址
              <br>
              (门牌号)
            </view>
          </view>
          <view class="flex-grow-1">
            <textarea
                name="detail"
                placeholder-style="line-height: 120rpx;"
                placeholder="输入地址或地图选择-->"
                style="height: 120rpx; width: 450rpx;line-height:normal;"
                :value="detail"
            ></textarea>
          </view>
          <image
              @tap="dingwei"
              class="dt"
              src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"
          ></image>
        </view>

        <view class="flex-row flex-y-center edit-row">
          <view class="flex-grow-0 row-label" style="font-weight: 600"
          >联系人
          </view
          >
          <view class="flex-grow-1">
            <input name="name" placeholder="姓名" :value="name"/>
          </view>
        </view>

        <view class="flex-row flex-y-center edit-row">
          <view class="flex-grow-0 row-label" style="font-weight: 600"
          >性别
          </view
          >
          <view class="flex-grow-0">
            <radio-group
                @change="radioChange"
                class="radio-group"
                name="radiogroup"
            >
              <label class="radio" v-for="(item, index) in items" :key="index">
                <radio :checked="item.checked" :value="item.value"></radio>
                {{ item.name }}
              </label>
            </radio-group>
          </view>
        </view>

        <view class="flex-row flex-y-center edit-row">
          <view class="flex-grow-0 row-label" style="font-weight: 600"
          >联系电话
          </view
          >
          <view class="flex-grow-1">
            <input
                name="mobile"
                placeholder="手机号码"
                type="number"
                :value="mobile"
            />
          </view>
        </view>

      </view>
    </form>
  </view>
</template>

<script>
import cardlist from '@/ymq_canyino2o/dist/cardlist/index'
import gettel from '@/ymq_canyino2o/dist/gettel/index'

var qqmapsdk
var app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
export default {
  components: {
    cardlist,
    gettel
  },
  data() {
    return {
      name: '',
      mobile: '',
      detail: '',
      region: [],

      items: [
        {
          name: '先生',
          value: '1',
          checked: true
        },
        {
          name: '女士',
          value: '2'
        }
      ],

      System: '',
      bjid: '',
      color: ''
    }
  },
  onLoad: function (t) {
    app.globalData.setNavigationBarColor(this)
    console.log(t.bjid)
    var that = this
    app.globalData.util.request({
      url: 'entry/wxapp/System',
      cachetime: '0',
      success: function (e) {
        console.log(e)
        that.setData({
          System: e.data,
          bjid: t.bjid
        })
        qqmapsdk = new QQMapWX({
          key: e.data.map_key
        })
        if (t.bjid) {
          app.globalData.util.request({
            url: 'entry/wxapp/MyAddressInfo',
            cachetime: '0',
            data: {
              id: t.bjid
            },
            success: function (e) {
              console.log(e.data)
              that.setData({
                name: e.data.user_name,
                mobile: e.data.tel,
                detail: e.data.address,
                region: e.data.area
              })
            }
          })
        } else {
          uni.getLocation({
            type: 'wgs84',
            success: function (e) {
              console.log(e)
              qqmapsdk.reverseGeocoder({
                coord_type: 1,
                location: {
                  latitude: e.latitude,
                  longitude: e.longitude
                },
                success: function (e) {
                  console.log(e)
                  that.setData({
                    detail: e.result.formatted_addresses.recommend,
                    region: [
                      e.result.address_component.province,
                      e.result.address_component.city,
                      e.result.address_component.district
                    ]
                  })
                },
                fail: function (e) {
                  console.log(e)
                },
                complete: function (e) {
                  console.log(e)
                }
              })
            }
          })
        }
      }
    })
  },
  onReady: function () {
  },
  onShow: function () {
  },
  methods: {
    bindRegionChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.setData({
        region: e.detail.value
      })
    },

    dingwei: function (e) {
      console.log(e)
      var that = this
      // 打开地图选择位置。
      // 这里需要再uniapp的地图配置中选择一个地图,并配置key
      uni.chooseLocation({
        // latitude: '', //目标纬度
        // longitude: '', //目标经度
        success: function (e) {
          var t = e.address.indexOf('区')
          console.log(e.address.substring(t + 1) + e.name)
          that.setData({
            detail: e.address.substring(t + 1) + e.name
          })
        },
        fail: function () {
          // #ifdef MP
          // 小程序才需要  获取用户的当前设置。
          uni.getSetting({
            success: function (e) {
              console.log(e)
              if (e.authSetting['scope.address']) {
                console.log('取消')
              } else {
                uni.showModal({
                  title: '提示',
                  content:
                      '您拒绝了获取收货地址授权，部分功能无法使用,点击确定重新获取授权。',
                  showCancel: false,
                  success: function (e) {
                    if (e.confirm) {
                      uni.openSetting({
                        success: function (e) {
                          if (e.authSetting['scope.address']) {
                            that.dingwei()
                          }
                        },
                        fail: function (e) {
                        }
                      })
                    }
                  }
                })
              }
            }
          })
          // #endif
        }
      })
    },

    formSubmit: function (e) {
      console.log('form发生了submit事件，携带数据为：', e.detail.value)
      var o = uni.getStorageSync('users').id
      var s = e.detail.value.name
      var n = e.detail.value.radiogroup
      var i = e.detail.value.mobile
      var l = this.region.toString()
      var c = e.detail.value.detail
      var d = this.bjid
      var t = this.region.join('') + c
      console.log(o, s, i, l, c, d, t)
      var a = ''
      var u = true
      if ('' == s) {
        a = '请填写收货人！'
      } else {
        if ('' == i) {
          a = '请填写手机号！'
        } else {
          if (i.length < 7) {
            a = '手机号错误！'
          } else {
            if ('' == l) {
              a = '请选择所在地区！'
            } else {
              if ('' == c) {
                a = '请填写详细地址！'
              } else {
                u = false
                uni.showLoading({
                  title: '保存中...',
                  mask: true
                })
                qqmapsdk.geocoder({
                  address: t,
                  success: function (e) {
                    console.log(e)
                    uni.navigateBack({
                      delta: 1
                    })
                    if ('0' == e.status) {
                      var t = e.result.location.lat
                      var a = e.result.location.lng
                      if (null == d) {
                        app.globalData.util.request({
                          url: 'entry/wxapp/AddAddress',
                          cachetime: '0',
                          data: {
                            address: c,
                            area: l,
                            user_name: s,
                            user_id: o,
                            tel: i,
                            sex: n,
                            lat: t,
                            lng: a
                          },
                          success: function (e) {
                            console.log(e.data)
                            if ('0' != e.data) {
                              uni.showToast({
                                title: '保存成功',
                                duration: 1000
                              })

                              uni.setStorageSync("xzdz_id", e.data);
                              setTimeout(function () {
                                uni.navigateBack({
                                  delta: 1
                                });
                              }, 300);

                              // var t = getCurrentPages()
                              // console.log(t)
                              // if (
                              //     1 < t.length &&
                              //     'ymq_canyino2o/pages/takeout/takeoutform' ==
                              //     t[t.length - 3].route
                              // ) {
                              //   t[t.length - 3].countpsf()
                              // }
                              // setTimeout(function () {
                              //   uni.navigateBack({
                              //     delta: 1
                              //   })
                              // }, 1000)
                            }
                          }
                        })
                      } else {
                        app.globalData.util.request({
                          url: 'entry/wxapp/UpdAddress',
                          cachetime: '0',
                          data: {
                            address: c,
                            area: l,
                            user_name: s,
                            id: d,
                            tel: i,
                            sex: n,
                            lat: t,
                            lng: a
                          },
                          success: function (e) {
                            console.log(e.data)
                            if ('1' == e.data) {
                              uni.showToast({
                                title: '保存成功',
                                duration: 1000
                              })
                              setTimeout(function () {
                                uni.navigateBack({
                                  delta: 1
                                })
                              }, 1000)
                            }
                          }
                        })
                      }
                    } else {
                      uni.showModal({
                        title: '提示',
                        content: '网络错误！'
                      })
                    }
                  },
                  fail: function (e) {
                    console.log(e)
                  },
                  complete: function (e) {
                    console.log(e)
                  }
                })
              }
            }
          }
        }
      }
      if (1 == u) {
        uni.showModal({
          title: '提示',
          content: a
        })
      }
    },

    formReset() {
      console.log('占位：函数 formReset 未声明')
    },

    radioChange() {
      console.log('占位：函数 radioChange 未声明')
    }
  }
}
</script>
<style>
@import './bjdz.css';
</style>
